<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<!--script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script-->
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.core.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="../extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="calLimit"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<div class="content-secondary"> 
			<div id="jqm-homeheader"> 
				<h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
				<p>A Date and Time Picker plugin for jQueryMobile</p> 
			</div> 
			
			<div class="optdemos sidebar"></div>
		</div>
		
		<div class="content-primary"> 
			<div data-role="collapsible-set" data-mini="true">
			
				<div data-role="collapsible" data-collapsed="false">
					<h2>No Button, Focus Mode</h2>
					<p>You can open on focus, removing the button by using 'useFocus' set to 'true' and 'useButton' set to false</p>
					
					<div data-role="fieldcontain">
						<label for="focusmode">Some Date</label><input name="focusmode" type="date" data-role="datebox" id="focusmode" data-options='{"mode":"calbox", "useFocus": true, "useButton": false}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox", "useFocus": true, "useButton": false}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Button and Focus Mode</h2>
					<p>You can open on focus, leaving the button by using 'useFocus' set to 'true'</p>
				
					<div data-role="fieldcontain">
						<label for="focusmode2">Some Date</label><input name="focusmode2" type="date" data-role="datebox" id="focusmode2" data-options='{"mode":"calbox","useFocus": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox","useFocus": true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Open on Link</h2>
					<p>You can force open the dialog by clicking <a href="#" id="linkmodelink">here</a>.</p>
					
					<div data-role="fieldcontain">
						<label for="linkmode">Some Date</label><input name="linkmode" type="date" data-role="datebox" id="linkmode" data-options='{"mode": "calbox"}' />
					</div>
				
					<script type="text/javascript">
						$('#linkmodelink').live('click', function() {
							$('#linkmode').datebox('open');
						});
					</script>
					<a href="#sourceLINKMODE" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
					<div data-role="popup" id="sourceLINKMODE" class="ui-content">
						<strong>HTML</strong>
						<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"noButton": true}'&gt;
   
&lt;a href="#" id="linkmodelink"&gt;Open Link&lt;/a&gt;</pre>
						<strong>jQuery</strong>
						<pre class="prettyprint">$('#linkmodelink').live('click', function() {
  $('#mydate').datebox('open');
});</pre>
					</div>
				</div>
				<div data-role="collapsible">
					<h2>Using in control groups</h2>
					<p>You can open datebox with a standard button as part of a control group.  Here's 3 examples:</p>
			
			        <p><strong>1) </strong>Just a date button in a horizontal control group.  Current date is <span id="ctrlgrp1out"></span></p>
			        <div style="display:none">
            			<input name="ctrlgrp1" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp1" />
			        </div>
			        <div data-role="controlgroup" data-type="horizontal">
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
			            <a href="#" id="ctrlgrp1but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
			        </div>
			        <script type="text/javascript">
            			$('#ctrlgrp1but').on('vclick', function() {
			                $('#ctrlgrp1').datebox('open');
            			});
			            $('#ctrlgrp1').bind('change', function(e,p) {
			                $('#ctrlgrp1out').text($(this).val());
						});
					</script>
					<a href="#sourceCTRLGRP1" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
					<div data-role="popup" id="sourceCTRLGRP1" class="ui-content">
						<strong>HTML</strong>
						<pre class="prettyprint">&lt;div style="display:none"&gt;
  &lt;input name="ctrlgrp" type="text" data-role="datebox"
    data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
&lt;/div&gt;
&lt;div data-role="controlgroup" data-type="horizontal"&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
  &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
&lt;/div&gt;</pre>
						<strong>jQuery</strong>
						<pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
  $('#ctrlgrp').datebox('open');
});
$('#ctrlgrp').bind('change', function(e,p) {
  $('#ctrlgrpout').text($(this).val());
});</pre>
					</div>

			        <p><strong>2) </strong>Just a date button in a vertical control group.  Current date is <span id="ctrlgrp2out"></span></p>
			        <div style="display:none">
            			<input name="ctrlgrp2" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp2" />
			        </div>
			        <div data-role="controlgroup">
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
			            <a href="#" id="ctrlgrp2but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
			        </div>
			        <script type="text/javascript">
            			$('#ctrlgrp2but').on('vclick', function() {
			                $('#ctrlgrp2').datebox('open');
            			});
			            $('#ctrlgrp2').bind('change', function(e,p) {
			                $('#ctrlgrp2out').text($(this).val());
						});
					</script>
					<a href="#sourceCTRLGRP2" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
					<div data-role="popup" id="sourceCTRLGRP2" class="ui-content">
						<strong>HTML</strong>
						<pre class="prettyprint">&lt;div style="display:none"&gt;
  &lt;input name="ctrlgrp" type="text" data-role="datebox"
    data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
&lt;/div&gt;
&lt;div data-role="controlgroup"&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
  &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
&lt;/div&gt;</pre>
						<strong>jQuery</strong>
						<pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
  $('#ctrlgrp').datebox('open');
});
$('#ctrlgrp').bind('change', function(e,p) {
  $('#ctrlgrpout').text($(this).val());
});</pre>
					</div>

					<p><strong>3) </strong>A date button in a horizontal control group, with the current date as the text</p>
			        <div style="display:none">
            			<input name="ctrlgrp3" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp3" />
			        </div>
			        <div data-role="controlgroup" data-type="horizontal">
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
			            <a href="#" id="ctrlgrp3but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
            			<a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
			        </div>
			        <script type="text/javascript">
            			$('#ctrlgrp3but').on('vclick', function() {
			                $('#ctrlgrp3').datebox('open');
            			});
			            $('#ctrlgrp3').bind('change', function(e,p) {
            			    $('#ctrlgrp3but').find('.ui-btn-text').text($(this).val());
			            });
					</script>
					<a href="#sourceCTRLGRP3" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
                    <div data-role="popup" id="sourceCTRLGRP3" class="ui-content">
						<strong>HTML</strong>
						<pre class="prettyprint">&lt;div style="display:none"&gt;
  &lt;input name="ctrlgrp" type="text" data-role="datebox" 
    data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
&lt;/div&gt;
&lt;div data-role="controlgroup" data-type="horizontal"&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
  &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
  &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
&lt;/div&gt;</pre>
						<strong>jQuery</strong>
						<pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
  $('#ctrlgrp').datebox('open');
});
$('#ctrlgrp').bind('change', function(e,p) {
  $('#ctrlgrpbut').find('.ui-btn-text').text($(this).val());
});</pre>
					</div>



				</div>
			</div>
		</div> 
		
	</div>
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
